<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title th:text="${classObj.className} + ' 的课程 - 企业培训平台'">班级课程</title>
  <style>
    /* --- Global Layout & Variables (Consistent with other pages) --- */
    :root {
      --sidebar-width: 240px;
      --primary-color: #007bff;
      --secondary-color: #6c757d;
      --info-color: #17a2b8;
      --border-color: #dee2e6;
      --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      background-color: #f4f5f7;
      margin: 0;
      color: #333;
    }
    /* --- Core Layout Fix --- */
    .main-content {
      margin-left: var(--sidebar-width); /* Fixes overlap with sidebar */
      padding: 30px;
    }
    .container-card {
      background-color: #ffffff;
      border-radius: 8px;
      box-shadow: var(--card-shadow);
      padding: 25px 30px;
    }
    /* --- Page Header --- */
    .page-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 25px;
      padding-bottom: 20px;
      border-bottom: 1px solid var(--border-color);
    }
    .page-header h1 {
      margin: 0;
      font-size: 1.8em;
      color: #333;
    }
    /* --- Class Info Box --- */
    .class-info {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 15px;
      padding: 20px;
      background-color: #e9ecef;
      border-left: 5px solid var(--primary-color);
      border-radius: 0 8px 8px 0;
      margin-bottom: 30px;
    }
    .class-info p {
      margin: 0;
      font-size: 1em;
      color: #495057;
    }
    .class-info p strong {
      font-weight: 600;
      color: #343a40;
    }
    /* --- Alert Messages --- */
    .alert {
      padding: 15px;
      margin-bottom: 20px;
      border-radius: 5px;
      border: 1px solid transparent;
    }
    .alert-success { background-color: #d4edda; color: #155724; border-color: #c3e6cb; }
    .alert-danger { background-color: #f8d7da; color: #721c24; border-color: #f5c6cb; }

    /* --- Course Card Grid --- */
    .course-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 25px;
    }
    .course-card {
      background-color: #fff;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
      border: 1px solid #eee;
      transition: transform 0.2s ease-in-out, box-shadow 0.3s ease;
      display: flex;
      flex-direction: column;
    }
    .course-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--card-shadow);
    }
    .course-card-details {
      padding: 20px;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
    }
    .course-card-details h3 {
      font-size: 1.2em;
      color: #212529;
      margin: 0 0 10px 0;
    }
    .course-card-details p {
      font-size: 0.9em;
      color: #6c757d;
      line-height: 1.5;
      margin: 0 0 8px 0;
    }
    .course-card-details .price {
      font-weight: bold;
      color: var(--primary-color);
      font-size: 1.1em;
      margin-top: 15px;
    }
    .card-actions {
      margin-top: 20px;
      padding-top: 15px;
      border-top: 1px solid #f1f1f1;
    }
    .btn {
      display: inline-block; width: 100%; box-sizing: border-box;
      padding: 10px 15px; color: white; text-align: center;
      border-radius: 5px; text-decoration: none; font-size: 0.9em;
      font-weight: 500; transition: all 0.2s ease-in-out;
      cursor: pointer; border: none;
    }
    .btn:hover { filter: brightness(90%); }
    .btn-info { background-color: var(--info-color); }
    .btn-secondary {
      background-color: var(--secondary-color);
      max-width: 200px; /* Limit width of the return button */
      margin: 30px auto 0; /* Center the return button */
      display: block;
    }

    .no-results-message {
      text-align: center; padding: 40px; color: #666;
      background-color: #fafafa; border: 1px dashed #ccc; border-radius: 8px;
    }
  </style>
</head>
<body>
<div th:replace="~{fragments/header :: header}"></div>

<div class="main-content">
  <div class="container-card">
    <div class="page-header">
      <h1 th:text="${classObj.className} + ' 的课程'"></h1>
    </div>

    <div th:if="${successMessage}" class="alert alert-success" th:text="${successMessage}"></div>
    <div th:if="${errorMessage}" class="alert alert-danger" th:text="${errorMessage}"></div>

    <div class="class-info">
      <p><strong>班级名称:</strong> <span th:text="${classObj.className}"></span></p>
      <p><strong>班级ID:</strong> <span th:text="${classObj.id}"></span></p>
      <p><strong>课程数量:</strong> <span th:text="${classCourses.size()}"></span></p>
    </div>

    <div class="course-grid">
      <div class="course-card" th:each="course : ${classCourses}">
        <div class="course-card-details">
          <h3 th:text="${course.couName}"></h3>
          <p th:text="${#strings.abbreviate(course.couIntroduction, 80)}"></p>
          <p>讲师：<span th:text="${course.teaId != null ? '讲师ID: ' + course.teaId : '未知'}"></span></p>
          <p>章节数：<span th:text="${course.couCataNum}"></span></p>
          <p class="price">价格: <span th:text="${course.couPrice != null ? course.couPrice + ' 积分' : '免费'}"></span></p>
        </div>
        <div class="card-actions">
          <a th:href="@{/course/detail/{id}(id=${course.id})}" class="btn btn-info">进入学习</a>
        </div>
      </div>
    </div>

    <div th:if="${#lists.isEmpty(classCourses)}" class="no-results-message">
      <p>该班级目前没有关联任何课程。</p>
    </div>

    <a th:href="@{/student/classes}" class="btn btn-secondary">返回我的班级</a>
  </div>
</div>
</body>
</html>